import React, { useState } from 'react'
import Navbar from '../../components/Navbar'
import { Form, Input, Button, Toast } from 'antd-mobile'
import { AntOutline } from 'antd-mobile-icons'
import { useNavigate, useLocation } from 'react-router-dom'
import { reg } from "../../apis/reg"
import '../../style/reg/password.scss'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
export default function Code() {
    const location = useLocation();
    const navigate = useNavigate()
    const [visible, setVisible] = useState(false)
    const onFinish = async (values: any) => {
        let res: any = await reg(location.state.tel, values.password)
        console.log(res);
        
        if (res.code === '200') {
            Toast.show({
                icon: 'success',
                content: '保存成功',
            })
            navigate('/login')
        }
    }

    return (
        <div>
            <Navbar title="注册"/>

            <Form onFinish={onFinish}
                style={{ marginTop: '10%' }}
                layout='horizontal'
                footer={
                    <Button block type='submit' color='danger' size='large' shape='rounded'
                    >
                        下一步
                    </Button>
                }>
                <AntOutline fontSize={48} style={{ margin: "0 auto", marginBottom: "20px", width: "100%" }} />
                <p style={{ fontSize: "14px", textAlign: "center", marginBottom: "20px" }}>请设置登陆密码</p>
                <Form.Item
                    rules={[{ pattern: /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/, message: "输入正确格式" }]}
                    name='password'
                    extra={
                        <div className='eye'>
                            {!visible ? (
                                <EyeInvisibleOutline onClick={() => setVisible(true)} />
                            ) : (
                                <EyeOutline onClick={() => setVisible(false)} />
                            )}
                        </div>
                    }
                >
                    <Input
                        autoComplete='false'
                        placeholder='请设置至少六位登陆密码'
                        clearable
                        type={visible ? 'text' : 'password'}
                    />
                </Form.Item>
                <p className='word'>密码强度校验,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符[!@#$%^&*? ]</p>
            </Form>
        </div>
    )
}
